<template>
    <div id="zxReal">
        <div class="heightChart">
            <!--上-->
            <div class="navTop">
                <div class="tops">
                    <div class="topName">接听数/登录数</div>
                    <div class="topNum">{{num1}}/{{num2}}</div>
                </div>
            </div>
            <!--下-->
            <div class="navBtm">
                <div class="boxImg img1">
                    <div class="boxTitle">示忙<br/>{{num3}}</div>
                </div>
<!--                <div class="boxImg img3">-->
<!--                    <div class="boxTitle">排队<br/>{{num7}}</div>-->
<!--                </div>-->
                <div class="boxImg img2">
                    <div class="boxTitle">工作<br/>{{num4}}</div>
                </div>
            </div>
            <div class="navBtm" style="padding: 0 100px">
                <div class="boxImg img4">
                    <div class="boxTitle">空闲<br/>{{num5}}</div>
                </div>
                <div class="boxImg img5">
                    <div class="boxTitle">离线<br/>{{num6}}</div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import {getExtNoCount} from "../../../network/home";
    export default {
        name: "zxReal",
        data() {
            return {
                // sum:'0',//总座机数
                num1:"0",
                num2:"0",
                num3:"0",
                num4:"0",
                num5:"0",
                num6:"0",
                timer:null
            }
        },
        mounted() {
            this.getExtNoCount()
            this.timer = setInterval(() => {
                this.getExtNoCount();
            },5000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('中间关闭')
            }
        },
        methods: {
            getExtNoCount(){
                getExtNoCount().then(res=>{
                    if(res.code=='200'){
                        // console.log(res.data)
                        this.num1 = res.data.inBusy //接听数 = 工作数
                        this.num2 = res.data.loginNum //登录数
                        this.num3 = res.data.inBusy//示忙
                        this.num4 = res.data.inBusy//工作
                        this.num5 = res.data.leisure//空闲
                        this.num6 = res.data.offLine//离线
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 795px;
        position: relative;
    }

    .navTop {
        width: 570px;
        height: 520px;
        background: url("../../../assets/img/worktake/center.png");
        background-size: 570px 520px;
        position: relative;
        text-align: center;
        margin-bottom: 10px;
    }

    .topName {
        font-size: 30px;
        color: #ffffff;
        padding-top: 180px;
        margin-bottom: 20px;
    }

    .topNum {
        font-size: 70px;
        color: var(--color-high-text);
    }

    .navBtm {
        padding: 10px 20px;
        display: flex;
        justify-content: space-around;
        font-size: 32px;
        margin-right: 20px;
    }

    .boxImg {
        width: 140px;
        height: 120px;
    }

    .img1 {
        background: url("../../../assets/img/worktake/b1.png");
        background-size: 140px 120px;
    }

    .img2 {
        background: url("../../../assets/img/worktake/b2.png");
        background-size: 140px 120px;
    }

    .img3 {
        background: url("../../../assets/img/worktake/b3.png");
        background-size: 140px 120px;
    }

    .img4 {
        background: url("../../../assets/img/worktake/b4.png");
        background-size: 140px 120px;
    }

    .img5 {
        background: url("../../../assets/img/worktake/b5.png");
        background-size: 140px 120px;
    }

    .boxTitle {
        text-align: center;
        color: #ffffff;
        margin-top: 40px;
        font-size: 28px;
        line-height: 140%;
    }

</style>
